// @flow
import React, { Component } from 'react';
import DragableItem from 'components/Common/DragableItem';
type Props = {};
type Data = {
    id: string,
    title: string,
    type: string,
    y?: number,
    x?: number
};
type State = {
    data: Array<Data>,
    draggingItemId: string,
    recItemid: string
};
type nodeItem = {
    title: string
};
const NodeItem = ({ title }: nodeItem) => {
    return <span>{title}</span>;
};
class Register extends Component<Props, State> {
    constructor(props: Props, state: State) {
        super(props, state);
        this.state = {
            data: [
                { id: '1', type: 'drag', title: 'spanDbClickHandle1' },
                { id: '2', type: 'drag', title: 'spanDbClickHandle2' },
                { id: '3', type: 'drag', title: 'spanDbClickHandle3' }
            ],
            draggingItemId: '',
            recItemid: ''
        };
    }
    render() {
        const { data } = this.state;
        // console.log(data);

        const arr = data.map((Item, key) => {
            return (
                <DragableItem
                    ref={`drag-item-${Item.id}`}
                    key={key}
                    id={Item.id}
                    type={Item.type}
                    item={<NodeItem title={Item.title} />}
                    // onNodeDragStart={e => {
                    //     console.log(e.target.id);
                    //     const id = e.target.id.split()[2];
                    //     const ii = this.state.data.filter(i => {
                    //         return i.id === id;
                    //     });
                    //     // const ind = this.state.data.indexOf(ii);
                    //     // const data = this.state.data.splice(ind, 1, ii);
                    //     this.setState({ draggingItemId: e.target.id });
                    // }}
                    onNodeDrag={(e, id) => {
                        // console.log('drag::' + e.target.id);
                        // console.log(this.state);
                        // console.log(this.refs.current);
                    }}
                    // onNodeDragEnd={e => {
                    //     console.log('onNodeDragEnd' + e.target.id);
                    //     if (this.state.recItemid !== this.state.draggingItemId) {
                    //         console.log('recItemid:' + this.state.recItemid);
                    //         console.log('draggingItemId:' + this.state.draggingItemId);
                    //         console.log('end and drag');
                    //     }
                    //     this.setState({ draggingItemId: '' });
                    // }}
                    // onNodeDragEnter={(e, node) => {
                    //     console.log('enter');
                    //     const { clientY } = e;
                    //     console.log('clientY:' + clientY);
                    //     this.setState({ recItemid: e.target.id });
                    // }}
                    // onNodeDragLeave={e => {
                    //     console.log('leave');
                    //     this.setState({ recItemid: '' });
                    // }}
                    // onNodeDataDrag={this.onNodeDataDrag}
                />
            );
        });
        return <div>{arr}</div>;
    }
}
export default Register;
